<p class="text-muted">{{ __("Check columns to select, drag to set order.") }}
    <br>{{ __("Widths can be set in px or %.") }}</p>
<div class="row">
    <div class="col-sm-6"><h4>{{ __("Column") }}</h4></div>
    <div class="col-sm-6 text-right"><h4>{{ __("Width") }}</h4></div>
</div>
<div class="column-selector-list">
    {% for (i=0; i < fields.length; i++) { var f = fields[i]; %}
        {% var selected = in_list(column_names, f.fieldname) %}
        <div class="row column-selector-row">
            <div class="col-sm-6">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                            data-fieldname="{{ f.fieldname }}"
                            {{ selected ? "checked" : "" }}>
                            {{ f.label }}
                    </label>
                </div>
            </div>
            <div class="col-sm-6 text-right">
                <input class="form-control column-width input-sm text-right"
                    value="{{ (widths[f.fieldname] || "") }}"
                    data-fieldname="{{ f.fieldname }}"
                    style="width: 100px; display: inline"
                    {{ selected ? "" : "disabled" }}>
            </div>
        </div>
    {% } %}
</div>
